<template>
  <div class="countent">
    <el-menu :default-active="activePath" router class="el-menu-vertical-demo container-table101" @open="handleOpen"
      @close="handleClose">
      <el-menu-item :index="item.name" v-for="(item,i) in navList" :key="i" @click="getIndex(i)">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.navItem }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        navList: [{
            icon: 'iconfont iconGRZX_icon__AccountInformation_Selected',
            name: '/detailInfoto',
            navItem: '账号信息'
          },
          {
            icon: 'iconfont iconGRZX_icon_MyOrder_Selected',
            name: '/orderlist',
            navItem: '我的订单'
          },
          {
            icon: 'iconfont el-icon-s-promotion',
            name: '/agency',
            navItem: '我的推广'
          },
          {
            icon: 'iconfont el-icon-message-solid',
            name: '/information',
            navItem: '我的消息'
          },
        ],
        activePath: '', //绑定高亮
      };
    },
    //监听属性 类似于data概念
    computed: {


    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },

      // 获取当前页
      getIndex(index) {
        sessionStorage.setItem('acount_detailInfo', index)
        this.$emit('handleClick', index)
      },
      getType() {
        this.$post(this.API.UserMsg).then(res => {
          // console.log(res);
          if (res.data.type == 4) {
            this.navList[2].navItem = "我的代理"
          } else {
            this.navList[2].navItem = "我的推广"
          }

        });
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      // 页面加载默认选中哪个界面
      let index = sessionStorage.getItem('acount_detailInfo');
      // console.log(this.$route.name);
      if (this.$route.name == 'agency') {
        index = 2
      }
      // console.log(index);
      if (index == 0) {
        this.activePath = '/detailInfoto'
      }
      if (index == 1) {
        this.activePath = '/orderlist'
      }
      if (index == 2) {
        this.activePath = '/agency'
      }
      if (index == 3) {
        this.activePath = '/information'
      }
      this.getType()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      // this.activePath = '/detailInfo'

    },
  }

</script>
<style scoped>
  .countent {
    width: 100%;
    height: 100%;
    background-color: #0f0f0f;
  }

  /* 图标 */
  i {
    color: #fff;
  }

  i .is-active {
    color: #fff;
  }

  .el-menu-item.is-active {
    background-color: #ee792d;
    color: #fff;
  }

  .el-menu-item.is-active:hover {
    background-color: #FF7226;
  }

  .el-menu-item:hover {
    outline: 0;
    background-color: #ccc;
  }

  .el-menu-item span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 500;
    line-height: 16px;
  }

  .el-menu-item {
    text-align: center;
    background-color: #0f0f0f;
    color: #fff;
  }

  div>>>.el-menu {
    border-right: 0;
  }

</style>
